<template>
  <div class="ticketList-box">
    <div class="header-box">
      <div class="menu-box">
        <el-button size="medium" @click="toggleGoods(0)">上架</el-button>
        <el-button size="medium" @click="toggleGoods(1)">下架</el-button>
      </div>
      <div class="menu-box">
        <!-- <el-button size="medium">重置链接</el-button> -->
        <el-button size="medium" v-clipboard:copy="this.$route.query.linkId" v-clipboard:success="onCopy" v-clipboard:error="onError">复制链接</el-button>
      </div>
    </div>
    <div class="priceList-con-big-box">
      <div class="priceList-tit">
        <div class="priceList-tit-date">
          <span style="margin-right:20px">{{ dataInfo.head.pname }}</span>
          <span style="margin-right:20px">{{ dataInfo.head.createTime | datetime }}</span>
          <span>{{ dataInfo.head.vnote }}</span>
        </div>
      </div>
      <el-table empty-text="赶快发布一张门票吧~" v-loading="loadingTable" element-loading-text="拼命加载中" :data="dataInfo.body" @selection-change="handleSelectionChange" border style="width: 100%">
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column width="300" align="center" label="部门ID票名日期" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="department-box">
              <div style="margin-right:20px">
                <el-tag size="mini" v-if="scope.row.status == 0" type="success">已上架</el-tag>
                <el-tag size="mini" v-else type="warning">已下架</el-tag>
              </div>
              <div style="text-align:left">
                <p>ID:{{ scope.row.ticketId }}</p>
                <p>{{ scope.row.tname }} {{ scope.row.tTypeDate }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="地址权益">
          <template slot-scope="scope">
            <p class="cellPLeft">{{scope.row.address }}</p>
            <p class="cellPLeft">{{ scope.row.detail }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="sprice" align="center" label="价格">
          <template slot-scope="scope">
            <p>{{ scope.row.sprice }}元</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="折扣价">
          <template slot-scope="scope">
            <p class="edit-menu">
              <span v-if="scope.row.eprice == null">未设置折扣价</span>
              <span v-else>{{ scope.row.eprice }}元</span>
              <span class="el-icon-edit-outline" style="font-size:20px;padding-left:10px;cursor:pointer;" @click="discountMenu(scope.row,dataInfo.body.length)"></span>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="库存">
          <template slot-scope="scope">
            <p class="edit-menu">
              <span>库存 {{ scope.row.inum || 0 }}</span>
              <span class="el-icon-edit-outline" style="font-size:20px;padding-left:10px;cursor:pointer;" @click="setInum(scope.row,dataInfo.body.length)"></span>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="销量">
          <template slot-scope="scope">
            <p>已卖{{ scope.row.snum || 0 }}</p>
          </template>
        </el-table-column>
        <el-table-column width="160" align="center" label="发布时间">
          <template slot-scope="scope">
            <p>{{ scope.row.createDate | datetime }}</p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 设置折扣价 -->
    <el-dialog title="设置折扣价" :visible.sync="setPriceAlert">
      <el-form :model="setPriceForm">
        <el-form-item label-width="100px" label="原价">
          <el-tag>{{ setPriceForm.sprice }}元</el-tag>
        </el-form-item>
        <el-form-item label-width="100px" label="折扣价">
          <el-slider :step="5" :disabled="isOneTiclet" :max="100" :min="0" class="setPrice-item" style="width:50%" @change="sliderChange()" v-model="setPriceFormSlider"></el-slider>
          <el-input-number :disabled="isOneTiclet" class="setPrice-item" style="width:40%;margin-left: 10%;" @change="epriceCahnge()" v-model="setPriceForm.eprice" controls-position="right" :max="setPriceForm.sprice" :step="10" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label-width="100px" label="折扣标签">
          <el-input v-model="setPriceForm.enote"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="价格标签">
          <el-input v-model="setPriceForm.snote"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setPriceAlert = false">取 消</el-button>
        <el-button :loading="setPriceLoding" icon="el-icon-check" type="primary" @click="editTicket('iprise')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 设置库存 -->
    <el-dialog title="设置库存" :visible.sync="setPriceINum">
      <el-form :model="setPriceForm">
        <el-form-item label-width="100px" label="库存">
          <el-input v-model="setPriceForm.inum"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setPriceINum = false">取 消</el-button>
        <el-button :loading="setPriceLoding" icon="el-icon-check" type="primary" @click="editTicket('inum')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isOneTiclet: true, //单张票不做折扣
      setPriceFormSlider: 0, //滑块值
      setPriceForm: {},
      dataInfo: {
        head: {
          pname: "",
          createTime: "",
          vnote: ""
        }
      },
      loadingTable: false, //表格
      selectPaiOther: [], //已经选择了选项
      allSelect: false, //全选
      setPriceForm: {
        name: 1
      }, //设置折扣价表单
      setPriceAlert: false, //设置折扣价alert
      setPriceLoding: false,
      setPriceINum: false //设置库存
    };
  },
  created() {
    this.getPriceList();
  },
  methods: {
    onCopy: function() {
      this.$message({
        type: "success",
        message: "复制成功"
      });
    },
    onError: function() {
      this.$message.error("复制失败");
    },
    // 选中项
    handleSelectionChange(val) {
      this.selectPaiOther = val;
    },
    initTime(value, format) {
      if (!value) {
        return "";
      }
      return this.$moment(value).format(format);
    },
    // 上下架   0 上架   1 下架
    toggleGoods(item) {
      if (!this.selectPaiOther.length) {
        this.$message({
          message: "请至少选一项",
          type: "warning"
        });
        return;
      }
      this.$confirm(
        item == 0 ? "您确定是否要上架当前门票?" : "您确定是否要下架当前门票?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.selectPaiOther.forEach(ele => {
            ele.status = item;
          });
          let subData = {
            activityId: this.$store.state.activityId,
            status: item,
            body: this.selectPaiOther
          };
          this.$http
            .post(
              "/api/isv/ticketPurchasePC/updateTicketPrciceGroupStatus",
              subData
            )
            .then(
              res => {
                if (res.data.success) {
                  this.$message({
                    type: "success",
                    message: item == 0 ? "门票上架成功!" : "门票下架成功!"
                  });
                  this.getPriceList();
                } else {
                  this.$message({
                    message: res.data.errorMsg || "数据提交失败",
                    type: "warning"
                  });
                }
              },
              err => {
                this.$message.error("服务器出小差了");
              }
            );
        })
        .catch(() => {});
    },
    // 得到价格组基础数据
    getPriceList() {
      this.loadingTable = true;
      this.$http
        .post("/api/isv/ticketPurchasePC/queryTicketPrciceGroupId", {
          projectId: this.$store.state.activityId,
          pricegroupId: this.$route.query.pricegroupId
        })
        .then(
          res => {
            this.loadingTable = false;
            if (res.data.success) {
              this.dataInfo = res.data.result;
            } else {
              this.$message({
                message: res.data.errorMsg || "数据获取失败",
                type: "warning"
              });
            }
          },
          err => {
            // this.loadingTable = false;
            this.$message.error("服务器出小差了");
          }
        );
    },
    //
    discountMenu(scopeRow, length) {
      this.isOneTiclet = true;
      if (length > 1) {
        this.isOneTiclet = false;
      }
      this.setPriceAlert = true;
      this.setPriceForm = Object.assign({}, scopeRow);
      this.setPriceFormSlider =
        Number((scopeRow.eprice / scopeRow.sprice).toFixed(2)) * 100;
    },
    // 折扣价
    epriceCahnge() {
      this.setPriceFormSlider =
        Number(
          (this.setPriceForm.eprice / this.setPriceForm.sprice).toFixed(2)
        ) * 100;
    },
    //滑块变化
    sliderChange() {
      this.setPriceForm.eprice = (
        this.setPriceForm.sprice *
        (this.setPriceFormSlider / 100)
      ).toFixed(2);
    },
    //设置价格弹框等信息
    setPriceAlertFun(scopeRow, length) {
      this.isOneTiclet = true;
      if (length > 1) {
        this.isOneTiclet = false;
      }
      this.setPriceAlert = true;
      this.setPriceForm = scopeRow;
      this.setPriceFormSlider =
        Number((scopeRow.eprice / scopeRow.sprice).toFixed(2)) * 100;
    },
    // 设置库存
    setInum(scopeRow) {
      this.setPriceINum = true;
      this.setPriceForm = Object.assign({}, scopeRow);
    },
    // 编辑折扣
    editTicket(item) {
      if (item == "iprise") {
        if (!this.isOneTiclet && !this.setPriceForm.eprice) {
          this.$message({
            message: "请输入折扣价",
            type: "warning"
          });
          return;
        }
      } else {
        if (!this.setPriceForm.inum) {
          this.$message({
            message: "请输入库存",
            type: "warning"
          });
          return;
        }
      }
      let subData = this.setPriceForm;
      this.setPriceLoding = true;
      subData.activityId = this.$store.state.activityId;
      this.$http
        .post(
          "/api/isv/ticketPurchasePC/updateTicketPrciceGroupBINumAndPrice",
          subData
        )
        .then(
          res => {
            this.setPriceLoding = false;
            if (res.data.success) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.setPriceAlert = false;
              this.setPriceINum = false;
              this.getPriceList();
            } else {
              this.$message({
                message: res.data.errorMsg || "数据提交失败",
                type: "warning"
              });
            }
          },
          err => {
            this.setPriceLoding = false;
            this.$message.error("服务器出小差了");
          }
        );
    },
    // 重置链接
    resetLinkFun(item) {
      this.$confirm("您确定要重置链接, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let targetPriceGroupId = "";
          for (let i = 0; i < this.$store.state.priceList.length; i++) {
            if (this.$store.state.priceList[i].head.ptype == 0) {
              targetPriceGroupId = this.$store.state.priceList[i].head
                .pricegroupId;
            }
          }
          let subData = {
            priceGroupId: item.head.pricegroupId,
            targetPriceGroupId: targetPriceGroupId
          };
          this.$http
            .post(
              "/api/isv/ticketPurchasePC/resetLinkByTicketPrciceGroupId",
              subData
            )
            .then(
              res => {
                if (res.data.success) {
                  this.$message({
                    type: "success",
                    message: "重置成功!"
                  });
                  this.getPriceList();
                } else {
                  this.$message({
                    message: res.data.errorMsg || "重置失败",
                    type: "warning"
                  });
                }
              },
              err => {
                this.$message.error("请重试！");
              }
            );
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.ticketList-box {
  width: 100%;
  min-height: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 26px 26px;
}
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.priceList-tit {
  margin-bottom: 20px;
  width: 100%;
}
.priceList-tit-date {
  font-size: 20px;
}
.priceList-con-big-box {
  width: 100%;
  margin-top: 20px;
}
.department-box {
  padding: 0 10px;
  display: flex;
  align-items: center;
}
.priceList-tit-con-box {
  max-width: 60%;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
}
.edit-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}
.priceList-tit-con {
  font-size: 15px;
  color: #999;
  /* margin-bottom: 10px; */
}
.setPrice-item {
  float: left;
}
.cellPLeft {
  text-align: left;
  width: 100%;
}
</style>
